<template>
    <div class="container">
        <div class="header">
            <van-image fit="contain" src="/wxchat/images/yysh.png" />
            <div class="title">
                <span class="text">
                    {{ window }}预约送货
                </span>
            </div>
        </div>
        <div class="body">
            <van-button type="default" block @click="show = true">重新选择送货日期</van-button>

            <van-popup :show="show" class="auto-width">
                <van-date-picker v-model="currentDate" title="请选择送货日期" :min-date="minDate" :max-date="maxDate"
                    @confirm="selectDt" @cancel="closeSelectDt" />
            </van-popup>
            <van-radio-group v-model="radio1">
                <van-cell-group>
                    <van-cell :value="1" clickable @click="selectRadio(item.id, item.rest)" v-for="item in list">
                        <template #right-icon>
                            <van-radio :name="item.id" :disabled="item.rest <= 0" />
                        </template>
                        <template #default>
                            <div class="text-left">{{ reservation_date.join('-') }} {{ item.start }}-{{ item.end }} {{
                                item.max
                            }}/剩余{{ item.rest }}</div>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>

            <van-button type="primary" block @click="submit">确认预约</van-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Button as VanButton, datePickerProps} from 'vant';
import { Image as VanImage, RadioGroup as VanRadioGroup, Radio as VanRadio, Cell as VanCell, CellGroup as VanCellGroup } from 'vant';
import { DatePicker as VanDatePicker, Popup as VanPopup } from 'vant';
import { showConfirmDialog, showDialog,showNotify  } from 'vant';
import { useRoute } from 'vue-router'
import router from '@/router'
import type { reservation } from '@/types/data'
import { getWindowApi, getWindowTimesApi, setResverationApi } from '@/api/index'

var route = useRoute()

const show = ref(false)
const current = new Date()
current.setDate(current.getDate() + 1)
const minDate = current

const year = current.getFullYear()
const month = current.getMonth() + 1
const day = current.getDate()

const currentDate = ref([year.toString(), month.toString(), day.toString()]);
const maxDate = new Date(year, month + 1, day)
const window = ref('')
const radio1 = ref('')
const reservation_date = ref([year.toString(), month.toString(), day.toString()]);// ref(['', '', ''])

const selectRadio = (id: string, rest: number) => {
    if (rest > 0) {
        radio1.value = id
    }
    else {
        radio1.value = ''
    }
}

const selectDt = () => {
    show.value = false
    reservation_date.value = currentDate.value
    getWindowTimesApi(window.value, reservation_date.value.join('-')).then(({ data }) => {
        list.value = data
    })
}
const closeSelectDt = () => {
    show.value = false
}

const submit = () => {
    if (radio1.value == '') {
        showDialog({
            message: '此时间段无法预约，请选择其他时间'
        });
        return;
    }
    else {
        showConfirmDialog({
            title: '提醒',
            message: '您选择的是\n' + window.value + '\n' + reservation_date.value.join('-') + "\n确定要继续预约吗"
        }).then(() => {
            let openid = route?.params.openid
            setResverationApi(radio1.value, openid as string, window.value, reservation_date.value.join('-')).then(({ data }) => {
                showDialog({
                    title: '提示',
                    message: '预约成功'
                }).then(()=>{
                    selectDt()
                });
            })
        }).catch((err) => {
            console.log(err)
        })
    }
}
const list = ref<reservation[]>([
    // {
    //     id: '1',
    //     datetime: '2023-01-01 10:00-11:00',
    //     max: 100,
    //     rest: 100
    // },
    // {
    //     id: '2',
    //     datetime: '2023-01-01 11:00-12:00',
    //     max: 100,
    //     rest: 90
    // }
])

onMounted(() => {
    let openid = route?.params.openid
    if (openid) {
        getWindowApi(openid as string).then(({ data }) => {
            if (data != "") {
                window.value = data
                show.value = true
            }
            else {
                showDialog({
                    message: '未查询到您的预设送货窗口，请联系采购部'
                }).then(() => {
                    router.replace({
                        name: '404'
                    })
                });
            }
        }).catch((err)=>{
            showNotify(
                { type: 'warning', message: '网络未连接' }
            );           
        })
    }
    else {
        router.replace({
            name: '404'
        })
    }
})
</script>
<style lang="scss" scoped>
.text-left {
    // font-size: 14pt;
    text-align: left;
}

.auto-width {
    width: auto;
}
</style>